<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>搜索</title>
    <link rel="icon" href="../../imgs/favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="../../css/common/header.css">
    <link rel="stylesheet" href="../../css/product/search.css">
    <link rel="stylesheet" href="../../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../css/iconfont/iconfont.css">
    <link rel="stylesheet" href="../../css/common/page_bottom.css">
</head>

<body style="margin: 0px;">
    <div class="app">
        <div class="header">
            <div class="site-topbar">
                <div class="container">
                    <div class="topbar-nav">
                        <a href="#">小米商城</a>
                        <span class="sep">|</span>
                        <a href="#">MIUI</a>
                        <span class="sep">|</span>
                        <a href="#">loT</a>
                        <span class="sep">|</span>
                        <a href="#">云服务</a>
                        <span class="sep">|</span>
                        <a href="#">天星数科</a>
                        <span class="sep">|</span>
                        <a href="#">有品</a>
                        <span class="sep">|</span>
                        <a href="#">小爱开放平台</a>
                        <span class="sep">|</span>
                        <a href="#">企业团购</a>
                        <span class="sep">|</span>
                        <a href="#">资质证照</a>
                        <span class="sep">|</span>
                        <a href="#">协议规则</a>
                        <span class="sep">|</span>
                        <a href="#">下载app</a>
                        <span class="sep">|</span>
                        <a href="#">智能生活</a>
                        <span class="sep">|</span>
                        <a href="#">Select Location</a>
                        <span class="sep">|</span>
                    </div>
                    <div class="topbar-cart">
                        <a href="#"><em class="iconfont icon-gouwuchekong"> </em>购物车<span
                                class="cart-num">(0)</span></a>
                        <div class="cart-menu">
                            <div class="menu-content">
                                <div class="loading">
                                    <div class="loader"></div>
                                    <ul class="cart-list hide"></ul>
                                    <div class="cart-total hide"></div>
                                    <div class="msg-empty hide">购物车中还没有商品,赶紧选购吧!</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="topbar-info">
                        <a href="#">登录</a>
                        <span class="sep">|</span>
                        <a href="#">注册</a>
                        <span class="sep">|</span>
                        <span class="message">
                            <a href="#">消息通知</a>
                        </span>
                    </div>
                </div>
            </div>
            <!--  -->
            <div class="site-header">
                <div class="container">
                    <!-- logo -->
                    <div class="header-log">
                        <a href="#">
                            <img src="../../imgs/favicon.ico">
                        </a>
                    </div>
                    <!-- 中间导航部分 -->
                    <div class="header-nav">
                        <ul class="nav-list">
                            <li class="nav-category"><a href="" class="link-category">全部商品分类</a>
                                <div class="site-category">
                                    <ul class="site-category-list">
                                        <li class="category-item"><a href="">手机<em class="iconfont">&#xe625;</em></a>
                                        </li>
                                        <li class="category-item"><a href="">电视<em class="iconfont">&#xe625;</em></a>
                                        </li>
                                        <li class="category-item"><a href="">笔记本 平板<em
                                                    class="iconfont">&#xe625;</em></a></li>
                                        <li class="category-item"><a href="">家电<em class="iconfont">&#xe625;</em></a>
                                        </li>
                                        <li class="category-item"><a href="">出行 穿戴<em class="iconfont">&#xe625;</em></a>
                                        </li>
                                        <li class="category-item"><a href="">智能 路由器<em
                                                    class="iconfont">&#xe625;</em></a></li>
                                        <li class="category-item"><a href="">电源 配件<em class="iconfont">&#xe625;</em></a>
                                        </li>
                                        <li class="category-item"><a href="">健康 儿童<em class="iconfont">&#xe625;</em></a>
                                        </li>
                                        <li class="category-item"><a href="">耳机 音箱<em class="iconfont">&#xe625;</em></a>
                                        </li>
                                        <li class="category-item"><a href="">生活 箱包<em class="iconfont">&#xe625;</em></a>
                                        </li>
                                    </ul>
                                </div>
                            </li>
                            <li class="nav-item"><a href="">小米手机</a></li>
                            <li class="nav-item"><a href="">Redmi&nbsp;红米</a></li>
                            <li class="nav-item"><a href="">电视</a></li>
                            <li class="nav-item"><a href="">笔记本</a></li>
                            <li class="nav-item"><a href="">平板</a></a></li>
                            <li class="nav-item"><a href="">家电</a></li>
                            <li class="nav-item"><a href="">路由器</a></li>
                            <li class="nav-item"><a href="">智能硬件</a></li>
                            <li class="nav-item"><a href="">服务</a></li>
                            <li class="nav-item"><a href="">社区</a></li>
                        </ul>
                    </div>
                    <!-- 搜索区域 - 弹性盒子 -->
                    <div class="header-search">
                        <div class="search">
                            <div class="item1">
                                <input type="text" placeholder="小米11">
                            </div>
                            <div class="item2">
                                <input id="goToSearch" type="button" class="iconfont" style="font-size: 32px;" value="&#xeafe;">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        <div class="mi-search">
            <div class="container">
                <div class="search-container">
                    <div class="container-main">
                        <div class="breadcrumbs">
                            <div class="container">
                                <a href="#">首页</a>
                                <span class="sep">></span>
                                <a href="#">全部结果</a>
                                <span class="sep">></span>
                                <span>11</span>
                            </div>

                        </div>
                        <div class="search-filter">
                            <div class="filter-wrap">
                                <div class="filter-list">
                                    <ul class="item show-less">
                                        <span class="label">分类:</span>
                                        <li>
                                            <a href="" class="product-type-item">全部</a>
                                        </li>
                                        <li class="active">
                                            <a class="product-type-item" id="search-xiaomi" onclick="show01()">小米手机</a>
                                        </li>
                                        <li class="active">
                                            <a class="product-type-item">手机壳套</a>
                                        </li>
                                        <li class="active">
                                            <a class="product-type-item">手机壳换新服务</a>
                                        </li>
                                        <li class="active">
                                            <a class="product-type-item">手机屏幕换新服务</a>
                                        </li>
                                    </ul>
                                    <ul class="item show-less show-less-no">
                                        <div class="item-main">
                                            <span class="label">拍照像素:</span>
                                            <!-- <li>
                                                <a class="product-type-item">四摄像头</a>
                                            </li> -->
                                            <li>
                                                <a class="product-type-item">三摄像头</a>
                                            </li>
                                            <!-- <li>
                                                <a class="product-type-item">双摄像头</a>
                                            </li>
                                            <li>
                                                <a class="product-type-item">高清拍摄</a>
                                            </li> -->
                                        </div>
                                    </ul>
                                    <ul class="item show-less show-less-no">
                                        <div class="item-main">
                                            <span class="label">屏幕大小:</span>
                                            <li>
                                                <a class="product-type-item">超大屏</a>
                                            </li>
                                        </div>
                                    </ul>
                                    <ul class="item show-less show-less-no">
                                        <div class="item-main">
                                            <span class="label">运行内存</span>
                                            <li>
                                                <a class="product-type-item">极速畅玩</a>
                                            </li>
                                            <li>
                                                <a class="product-type-item">高速</a>
                                            </li>
                                        </div>
                                    </ul>
                                    <ul class="item show-less show-less-no">
                                        <div class="item-main">
                                            <span class="label">电池续航:</span>
                                            <li>
                                                <a class="product-type-item">超长待机</a>
                                            </li>
                                        </div>
                                    </ul>
                                    <div class="fix-position-box">
                                        <ul class="item level-item show-less show-less-no">
                                            <span class="label">
                                                高级选项:
                                            </span>
                                            <li class="level-menu"><a>CPU型号<i class="iconfont">&#xe68a;</i></a></li>
                                            <li class="level-menu"><a>CPU主频<i class="iconfont">&#xe68a;</i></a></li>
                                            <li class="level-menu"><a>前置摄像头<i class="iconfont">&#xe68a;</i></a></li>
                                            <li class="level-menu"><a>屏幕分辨率<i class="iconfont">&#xe68a;</i></a></li>
                                            <li class="level-menu"><a>存储容量<i class="iconfont">&#xe68a;</i></a></li>
                                            <li class="level-menu"><a>独立AI键<i class="iconfont">&#xe68a;</i></a></li>
                                            <li class="level-menu"><a>机身厚度<i class="iconfont">&#xe68a;</i></a></li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="search-result">
                            <div class="result-order">
                                <div class="order-list-box">
                                    <ul class="order-list">
                                        <li class="order-item">
                                            <a>综合</a>
                                        </li>
                                        <li class="order-item">
                                            <a>新品</a>
                                        </li>
                                        <li class="order-item">
                                            <a>销量</a>
                                        </li>
                                        <li class="order-item">
                                            <a>价格<i class="iconfont">&#xe62b;</i></a>
                                        </li>
                                    </ul>
                                    <ul class="type-list">
                                        <li>
                                            <div class="address-choose">
                                                <span class="label">收货地</span>
                                                <a><span class="address-show">北京 北京市</span></a>
                                            </div>
                                        </li>
                                        <li>
                                            <a><span class="checkbox"><i class="iconfont">&#xe650;</i></span>促销</a>
                                        </li>
                                        <li>
                                            <a><span class="checkbox"><i class="iconfont">&#xe650;</i></span>分期</a>
                                        </li>
                                        <li>
                                            <a><span class="checkbox"><i class="iconfont">&#xe650;</i></span>仅看有货</a>
                                        </li>
                                    </ul>
                                </div>
                                <div class="goods-list-box">
                                    <div class="goods-list clearfix">
                                        <div class="goods-item">
                                            <a>
                                                <div class="figure figure-img">
                                                    <img src="../../imgs/search-mi11.jpg" width="200" height="200">
                                                </div>
                                                <h2 class="title">小米11 8GB+128GB</h2>
                                                <p class="pric"><span>3799元</span></p>
                                                <div class="thumbs">
                                                    <ul class="thumb-list">
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="flags">
                                                    <span class="new-label">热卖</span>
                                                    <span class="sale-label">
                                                        <img src="../../imgs/juan.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/zeng.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/jiajiagou.png" width="55.5" height="18" class="sale-icon">
                                                    </span>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="goods-item">
                                            <a>
                                                <div class="figure figure-img">
                                                    <img src="../../imgs/search-mi11.jpg" width="200" height="200">
                                                </div>
                                                <h2 class="title">小米11 8GB+128GB</h2>
                                                <p class="pric"><span>3799元</span></p>
                                                <div class="thumbs">
                                                    <ul class="thumb-list">
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="flags">
                                                    <span class="new-label">热卖</span>
                                                    <span class="sale-label">
                                                        <img src="../../imgs/juan.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/zeng.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/jiajiagou.png" width="55.5" height="18" class="sale-icon">
                                                    </span>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="goods-item">
                                            <a>
                                                <div class="figure figure-img">
                                                    <img src="../../imgs/search-mi11.jpg" width="200" height="200">
                                                </div>
                                                <h2 class="title">小米11 8GB+128GB</h2>
                                                <p class="pric"><span>3799元</span></p>
                                                <div class="thumbs">
                                                    <ul class="thumb-list">
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="flags">
                                                    <span class="new-label">热卖</span>
                                                    <span class="sale-label">
                                                        <img src="../../imgs/juan.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/zeng.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/jiajiagou.png" width="55.5" height="18" class="sale-icon">
                                                    </span>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="goods-item">
                                            <a>
                                                <div class="figure figure-img">
                                                    <img src="../../imgs/search-mi11.jpg" width="200" height="200">
                                                </div>
                                                <h2 class="title">小米11 8GB+128GB</h2>
                                                <p class="pric"><span>3799元</span></p>
                                                <div class="thumbs">
                                                    <ul class="thumb-list">
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="flags">
                                                    <span class="new-label">热卖</span>
                                                    <span class="sale-label">
                                                        <img src="../../imgs/juan.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/zeng.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/jiajiagou.png" width="55.5" height="18" class="sale-icon">
                                                    </span>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="goods-item">
                                            <a>
                                                <div class="figure figure-img">
                                                    <img src="../../imgs/search-mi11.jpg" width="200" height="200">
                                                </div>
                                                <h2 class="title">小米11 8GB+128GB</h2>
                                                <p class="pric"><span>3799元</span></p>
                                                <div class="thumbs">
                                                    <ul class="thumb-list">
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="flags">
                                                    <span class="new-label">热卖</span>
                                                    <span class="sale-label">
                                                        <img src="../../imgs/juan.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/zeng.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/jiajiagou.png" width="55.5" height="18" class="sale-icon">
                                                    </span>
                                                </div>
                                            </a>
                                        </div>
                                        <div class="goods-item">
                                            <a>
                                                <div class="figure figure-img">
                                                    <img src="../../imgs/search-mi11.jpg" width="200" height="200">
                                                </div>
                                                <h2 class="title">小米11 8GB+128GB</h2>
                                                <p class="pric"><span>3799元</span></p>
                                                <div class="thumbs">
                                                    <ul class="thumb-list">
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="flags">
                                                    <span class="new-label">热卖</span>
                                                    <span class="sale-label">
                                                        <img src="../../imgs/juan.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/zeng.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/jiajiagou.png" width="55.5" height="18" class="sale-icon">
                                                    </span>
                                                </div>
                                            </a>
                                        </div><div class="goods-item">
                                            <a>
                                                <div class="figure figure-img">
                                                    <img src="../../imgs/search-mi11.jpg" width="200" height="200">
                                                </div>
                                                <h2 class="title">小米11 8GB+128GB</h2>
                                                <p class="pric"><span>3799元</span></p>
                                                <div class="thumbs">
                                                    <ul class="thumb-list">
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                        <li>
                                                            <img src="../../imgs/search-mi11.jpg" width="34" height="34">
                                                        </li>
                                                    </ul>
                                                </div>
                                                <div class="flags">
                                                    <span class="new-label">热卖</span>
                                                    <span class="sale-label">
                                                        <img src="../../imgs/juan.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/zeng.png" width="27" height="18" class="sale-icon">
                                                        <img src="../../imgs/jiajiagou.png" width="55.5" height="18" class="sale-icon">
                                                    </span>
                                                </div>
                                            </a>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="search-favourite">
                            <div class="mi-recommend cart-recommend">
                                <h2 class="recommend-title">
                                    <span>猜你喜欢</span>
                                </h2>
                                <div class="recommend-bd">
                                    <ul class="recommend-list">
                                        <li class="recommend-item swiper-container">
                                            <a>
                                                <img src="../../imgs/MIX4.jpg" width="140px">
                                                <div class="recommend-name">Note 9 Pro 5G</div>
                                                <div class="recommend-price">1399元</div>
                                                <div class="recommend-tips">66.5万人好评</div>
                                            </a>
                                        </li>
                                        <li class="recommend-item swiper-container">
                                            <a>
                                                <img src="../../imgs/MIX4.jpg" width="140px">
                                                <div class="recommend-name">Note 9 Pro 5G</div>
                                                <div class="recommend-price">1399元</div>
                                                <div class="recommend-tips">66.5万人好评</div>
                                            </a>
                                        </li>
                                        <li class="recommend-item swiper-container">
                                            <a>
                                                <img src="../../imgs/MIX4.jpg" width="140px">
                                                <div class="recommend-name">Note 9 Pro 5G</div>
                                                <div class="recommend-price">1399元</div>
                                                <div class="recommend-tips">66.5万人好评</div>
                                            </a>
                                        </li>
                                        <li class="recommend-item swiper-container">
                                            <a>
                                                <img src="../../imgs/MIX4.jpg" width="140px">
                                                <div class="recommend-name">Note 9 Pro 5G</div>
                                                <div class="recommend-price">1399元</div>
                                                <div class="recommend-tips">66.5万人好评</div>
                                            </a>
                                        </li>
                                        <li class="recommend-item swiper-container">
                                            <a>
                                                <img src="../../imgs/MIX4.jpg" width="140px">
                                                <div class="recommend-name">Note 9 Pro 5G</div>
                                                <div class="recommend-price">1399元</div>
                                                <div class="recommend-tips">66.5万人好评</div>
                                            </a>
                                        </li>
                                    </ul>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>





    <!-- 底部公共部分 -->
    <div class="page-bottom" style="float: left;">
        <ul class="address clear container">
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe607;</i>
                        <span>预约维修服务</span>
                    </a>

                </div>
            </li>
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe603;</i>
                        <span>七天无理由退货</span>
                    </a>

                </div>
            </li>
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe60f;</i>
                        <span>15天免费换货</span>
                    </a>

                </div>
            </li>
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe778;</i>
                        <span>满69包邮</span>
                    </a>

                </div>
            </li>
            <li>
                <div>
                    <a href="">
                        <i class="iconfont">&#xe608;</i>
                        <span>520余家售后网点</span>
                    </a>

                </div>
            </li>
        </ul>
        <div class="bottom-message clear container">
            <ul class="bottom-list">
                <li>
                    <dl>
                        <dd>帮助中心</dd>
                        <dt><a href="">账户管理</a></dt>
                        <dt><a href="">购物指南</a></dt>
                        <dt><a href="">订单操作</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>服务支持</dd>
                        <dt><a href="">售后政策</a></dt>
                        <dt><a href="">自动服务</a></dt>
                        <dt><a href="">相关下载</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>线下门店</dd>
                        <dt><a href="">小米之家</a></dt>
                        <dt><a href="">服务网点</a></dt>
                        <dt><a href="">授权体验店</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>关于小米</dd>
                        <dt><a href="">了解小米</a></dt>
                        <dt><a href="">加入小米</a></dt>
                        <dt><a href="">投资者关系</a></dt>
                        <dt><a href="">企业社会责任</a></dt>
                        <dt><a href="">廉洁举报</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>关注我们</dd>
                        <dt><a href="">新浪微博</a></dt>
                        <dt><a href="">官方微信</a></dt>
                        <dt><a href="">联系我们</a></dt>
                    </dl>
                </li>
                <li>
                    <dl>
                        <dd>特色服务</dd>
                        <dt><a href="">F码通道</a></dt>
                        <dt><a href="">礼物码</a></dt>
                        <dt><a href="">防伪查询</a></dt>
                    </dl>
                </li>
            </ul>
            <div class="contact">
                <h2>400-100-5678</h2>
                <p>8:00-18:00（仅收市话费）</p>
                <a href="">
                    <div class="customer">
                        <i class="iconfont">&#xe605;</i>
                        <span>人工客服</span>
                    </div>
                </a>
                <div class="wbwx">
                    <span>关注小米：</span>
                    <a href=""><i class="iconfont">&#xe613;</i></a>
                    <a href=""><i class="iconfont">&#xe604;</i></a>
                </div>
            </div>
        </div>
    </div>


    <script>
        // 先给搜索添加一个静态的跳转(后期这里要维护)
        let goToSearch = document.getElementById("goToSearch");
            goToSearch.onclick = function(){
            window.location.href = "../product/search.html";
        }
    </script>
</body>

</html>